<template>
  <j-modal :title="title" :width="1300" :visible="visible" switchFullscreen @cancel="handleCancel" @ok="handleOk">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
        <a-row>
          <a-col :span="7">
            <a-form-model-item label="指标名称">
              <a-input v-model="form.indicatorName" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button type="primary" icon="search" @click="onQuery"> 查询 </a-button>
              <a-button style="margin-left: 10px" icon="reload" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <vxe-table
          resizable
          :tree-config="{children: 'children'}"
          :data="pageData"
          header-align="center"
          :checkbox-config="{labelField: 'indicatorName', checkStrictly: false,showHeader:false}"
          @checkbox-change="onSelectedRow">
          <vxe-table-column type="checkbox" width="200" title="指标名称" tree-node></vxe-table-column>
          <vxe-table-column field="indicatorType" align="center" title="指标类型"></vxe-table-column>
          <vxe-table-column field="cardinalNumber" title="基数"></vxe-table-column>
          <vxe-table-column field="taskNumber" title="任务量"></vxe-table-column>
          <vxe-table-column field="addCardinalNumber" width="120" title="加/减分基数"></vxe-table-column>
          <vxe-table-column field="upperScore" title="上限分值"></vxe-table-column>
          <vxe-table-column field="lowerScore" title="下限分值"></vxe-table-column>
          <vxe-table-column field="weight" title="权重（%）"></vxe-table-column>
          <vxe-table-column field="isScoreCorrection" width="150" title="是否可修正得分"></vxe-table-column>
          <vxe-table-column field="isSharedScore" width="150" title="是否与上级共享评分"></vxe-table-column>
          <vxe-table-column field="isDisable" title="是否禁用"></vxe-table-column>
          <vxe-table-column field="collectWay" title="采集方式"></vxe-table-column>
        </vxe-table>
      </div>
    </a-card>
  </j-modal>
</template>

<script>
import Api from '@/api/sjsk/performanceService'
import { getDictItemsFromCache } from '@/api/api'

export default {
  name: 'selIndex',
  props: {
    orgCode: String,
  },
  components: {},
  data() {
    return {
      visible: false,
      title: '选择指标',
      form: {},
      labelCol: { span: 4 },
      wrapperCol: { span: 17 },
      rangePickerTime: [],
      loading: false,
      visible: false,
      isDisabled: true,
      reloading: false,
      checkList: [],
      form: {},
      treeDatas: [],
      toggle: true,
      columns: [
        {
          title: '指标名称',
          dataIndex: 'indicatorName',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={10} />
          },
        },
        {
          title: '指标类型',
          dataIndex: 'indicatorType',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('indicator', text)} />
          },
        },
        {
          title: '基数',
          dataIndex: 'cardinalNumber',
          align: 'center',
        },
        {
          title: '任务量',
          dataIndex: 'taskNumber',
          align: 'center',
        },
        {
          title: '加/减分基数',
          dataIndex: 'addCardinalNumber',
          align: 'center',
        },
        {
          title: '上限分值',
          dataIndex: 'upperScore',
          align: 'center',
        },
        {
          title: '下限分值',
          dataIndex: 'lowerScore',
          align: 'center',
        },
        {
          title: '权重（%）',
          dataIndex: 'weight',
          align: 'center',
        },
        {
          title: '是否可修正得分',
          dataIndex: 'isScoreCorrection',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('yn', text)} />
          },
        },
        {
          title: '是否与上级共享评分',
          dataIndex: 'isSharedScore',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('yn', text)} />
          },
        },
        {
          title: '是否禁用',
          dataIndex: 'isDisable',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('yn', text)} />
          },
        },
        {
          title: '采集方式',
          dataIndex: 'collectWay',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={this.$filterDictTextByCache('collectionMethod', text)} length={20} />
          },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: [],
    }
  },
  created() {},
  mounted() {},

  methods: {
    show() {
      this.onQuery()
      this.visible = true
    },

    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },

    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },

    handleCancel() {
      this.visible = false
    },

    handleOk() {
      this.$emit('ok', this.checkList)
      this.handleCancel()
    },

    onSelectedRow({records, reserves, indeterminates, checked, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event}) {
      console.info(`勾选${records.length}个树形节点`, records)
      /*console.info(`reserves`, reserves)
      console.info(`indeterminates`, indeterminates)
      console.info(`checked`, checked)
      console.info(`$event`, $event)*/


      this.checkList = records

      // this.isDisabled = records.length > 0 ? false : true
    },

    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },

    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      form = {
        ...form,
        auditStatus: '1',
        orgCode: this.orgCode,
      }
      this.loading = true
      Api.selectIndicatorList(form)
        .then((res) => {
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            // if (this.pageData.length) {
            //   this.pageData.forEach((el) => {
            //     this.setChildren(el)
            //   })
            // }
            //this.$refs.table.onClearRowKeys()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    setChildren(node) {
      if (node.children && node.children.length <= 0) {
        delete node.children
      } else {
        for (let i = 0; i < node.children.length; i++) {
          this.setChildren(node.children[i])
        }
      }
    },

    getSelectedKeys(keys) {
      console.log(keys)
      this.$set(this.form, 'labelId', keys.join(','))
      this.onQuery()
    },
  },
}
</script>

<style lang="less" scoped>
::v-deep .ant-card-body {
  padding: 0;
}
</style>
